<template>
  <div class="w-full h-full pl-1.5 bg-sky-50">
    <!-- 标题 -->
    <div class="w-full h-14 flex justify-center items-center bg-blue-400 text-white">
      <h1>{{ title }}</h1>
    </div>
    <!-- 第一行 -->
    <div class="font-bold text-blue-400" style="height: 13%">
      <div class="w-full h-full flex mt-2">
        <div class="w-1/4 pr-2">
          <dv-border-box7 class="h-full" :color="['#bed6f3', '#5fa4f8']" :backgroundColor="'rgba(243,141,165,0.08)'">
            <div class="h-1/3 flex justify-between items-center px-5" style="background: rgba(243,141,165,0.2)">
              <p>平均住院天数</p><p class="text-xl">53.33</p><p>天</p>
            </div>
            <div class="h-2/3 flex justify-between items-center px-20">
              <p>同比：</p><p class="text-xl">+4</p>
            </div>
          </dv-border-box7>
        </div>
        <div class="w-1/4 h-full pr-2">
          <dv-border-box7 class="h-full" :color="['#bed6f3', '#5fa4f8']" :backgroundColor="'rgba(142,243,139,0.08)'">
            <div class="h-1/3 flex justify-between items-center px-5" style="background: rgba(142,243,139,0.2)">
              <p>平均住院床日费</p><p class="text-xl">307.10</p><p>元</p>
            </div>
            <div class="h-2/3 flex justify-between items-center px-20">
              <p>同比</p><p class="text-xl">-0.66</p>
            </div>
          </dv-border-box7>
        </div>
        <div class="w-1/4 h-full pr-2">
          <dv-border-box7 class="h-full" :color="['#bed6f3', '#5fa4f8']" :backgroundColor="'rgba(246,215,18,0.08)'">
            <div class="h-1/3 flex justify-between items-center px-5" style="background: rgba(246,215,18,0.2)">
              <p>住院业务总收入</p><p class="text-xl">127174.00</p><p>万元</p>
            </div>
            <div class="h-1/3 flex justify-between items-center px-20">
              <p>同比：</p><p class="text-xl">3236.00</p>
            </div>
            <div class="h-1/3 flex justify-between items-center px-20">
              <p>环比</p><p class="text-xl">-2075</p>
            </div>
          </dv-border-box7>
        </div>
        <div class="w-1/4 h-full pr-2">
          <dv-border-box7 class="h-full" :color="['#bed6f3', '#5fa4f8']" :backgroundColor="'rgba(128,149,232,0.08)'">
            <div class="h-1/3 flex justify-between items-center px-5" style="background: rgba(128,149,232,0.2)">
              <p>住院药品总收入</p><p class="text-xl">27310.00</p><p>万元</p>
            </div>
            <div class="h-2/3 flex justify-between items-center px-20">
              <p>药品收入占比：</p><p class="text-xl">21.84%</p>
            </div>
          </dv-border-box7>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="font-bold flex mt-2" style="height: 38%">
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="出入院情况" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <div class="h-full">
              <BarChart
                :data="barData"
                unit="万"
                title="单位"
                :chartInfo="barChartInfo"
                class="w-full h-full"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="住院床位使用率" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <div class="h-full">
              <RadarChart
                :data="radarData"
                unit="%"
                title="住院床位使用率"
                :position="position"
                :showLegend="showLegend"
                class="w-full h-full"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="住院收入来源构成" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <PieChart
              :data="pieData"
              :position="position3"
              :showLabel="showLabel"
              :showLegend="showLegend2"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="font-bold flex mt-2" style="height: 38%">
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="住院重点指标" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <div class="h-full">
              <BarChart
                :data="barData2"
                unit="万"
                title="单位"
                :chartInfo="barChartInfo"
                class="w-full h-full"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="产科住院分析" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <div class="h-full">
              <RadarChart
                :data="radarData2"
                unit="人次"
                title="产科住院分析"
                :position="position2"
                :showLegend="showLegend"
                class="w-full h-full"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-1">
        <el-card class="h-full p-2 custom-card">
          <Title title="住院平均费用" color="#5fa4f8" />
          <div class="w-full" style="height: 27vh">
            <TrendChart class="w-full h-full" :data="trendData" />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const title = ref<string>("住院分析");

import Title from "./title.vue";
import BarChart from "./barChart.vue";
import RadarChart from "./radarChart.vue";
import PieChart from "./pieChart.vue";
import TrendChart from "./trendChart.vue";

// 出入院情况
const barData = reactive<Array>([
  { name: "原有住院", value: 7512 },
  { name: "入院", value: 1512 },
  { name: "声明出院", value: 1833 },
  { name: "在院", value: 8000 },
  { name: "出院结账", value: 7032 }
]);
// 住院重点指标
const barData2 = reactive<Array>([
  { name: "手术", value: 8000 },
  { name: "危重", value: 4512 },
  { name: "转科", value: 7800 },
  { name: "ICU", value: 1132 },
  { name: "死亡", value: 632 }
]);
const barChartInfo = reactive<object>({
  grid: {
    top: "15%",
    left: "2%",
    right: "2%",
    bottom: "0%",
    containLabel: true
  },
  barWidth: 35,
  interval: 0
});

// 住院床位使用率
const radarData = reactive<Array>([
  { name: "固定床位数", max: 1500, value: 1232 },
  { name: "可用床位数", max: 1500, value: 1285 },
  { name: "占用床位数", max: 1500, value: 900 },
  { name: "临时床位数", max: 1500, value: 953 }
]);
// 产科住院分析
const radarData2 = reactive<Array>([
  { name: "住院人数", max: 10000, value: 9040 },
  { name: "剖腹产例数", max: 10000, value: 5707 },
  { name: "顺产例数", max: 10000, value: 3823 }
]);
const position = reactive<Object>({
  center: ["50%", "50%"],
  radius: "75%",
  legend: "5%"
});
const position2 = reactive<Object>({
  center: ["50%", "65%"],
  radius: "75%",
  legend: "5%"
});
const showLegend = ref<Boolean>(false);

// 住院结构
const pieData = reactive<Array>([
  { name: "药品", value: 21.47 },
  { name: "材料", value: 6.91 },
  { name: "手术", value: 71.62 }
]);
const position3 = reactive<Object>({
  pie: ["50%", "50%"],
  radius: ["55%", "70%"],
  legend: "5%"
});
const showLabel = ref<Boolean>(true);
const showLegend2 = ref<Boolean>(false);

// 定义纵坐标（测试数据）
const xData = ref<Array>([
  "出院病人平均费用",
  "出院病人平均药费",
  "平均手术费"
]);
// 生成随机数
const generateRandomNumbers = (count, min, max) => {
  const randomNumbers = [];
  for (let i = 0; i < count; i++) {
    let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    randomNumbers.push(randomNumber);
  }
  return randomNumbers;
};
// 门诊急诊人次
const trendData = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(3, 15000, 25000),
  valueLast: generateRandomNumbers(3, 15000, 25000),
  color: [
    ["rgba(18,149,218,0.4)", "rgba(18,149,218,1)"],
    ["rgba(123,185,89,0.4)", "rgba(123,185,89,1)"]
  ],
  barWidth: 30,
  unit: "元"
});
</script>

<style scoped lang="scss"></style>
